<template>
	<view class="answer-add">
		<!-- 		<view style="position: sticky;top: 0;z-index: 1;">
			<view class="nav-bar"></view>
			<view class="top">
				<view
					style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;width: 690rpx;margin-left: 30rpx;">
					<view>
						<uni-icons type="left" size="30" color="#2c2c2c"></uni-icons>
					</view>
					<view @click="saveOrUpdateAnswer">
						<view>完成</view>
					</view>
				</view>
			</view>
		</view> -->
		<view class="top">
			<uni-icons style="margin-left: 25rpx;" type="left" size="30" color="#9f9f9f" @click="toBackPage">
			</uni-icons>
			<view class="input">编辑回答</view>
		</view>

		<view class="question-info">
			<view style="display: flex; flex-direction: column;width: 690rpx;margin-left: 30rpx;">
				<view
					style="font-size: 36rpx; color: #2c2c2c; font-weight: bold; margin-top: 20rpx; margin-bottom: 10rpx">
					标题
				</view>
				<view style="color: #2c2c2c;margin-bottom: 10rpx">
					{{ question.title || 'hhhhhhhhh' }}
				</view>
				<view style="font-size: 36rpx; color: #2c2c2c; font-weight: bold; margin-bottom: 10rpx">
					描述
				</view>
				<view style="margin-top: 10rpx;margin-bottom: 20rpx;">
					{{ question.context || 'hhhhhhhhh' }}
				</view>
				<view style="font-size: 36rpx; color: #2c2c2c; font-weight: bold; margin-bottom: 10rpx">
					观点
				</view>
				<view style="margin-top: 10rpx;margin-bottom: 20rpx;">
					{{ point.keyword || 'hhhhhhhhh' }}
				</view>
				<view style="font-size: 36rpx; color: #2c2c2c; font-weight: bold; margin-bottom: 10rpx">
					回答
				</view>
			</view>
		</view>


		<!-- 		<view class="card point" style="width: 690rpx;margin-left: 30rpx;margin-top: 20rpx;">
			<view class="top">
				<view
					:style="'width: 160rpx;height: 40rpx;border-radius: 10rpx;background-color: ' + mindDeepColor[2] + ';'">
				</view>
			</view>
			<view class="content">
				{{ point.keyword }}
			</view>
			<view class="bottom">
				<view>回答数：56</view>
				<view>发布于：2022-10-15 8:00</view>
			</view>
		</view>
 -->


		<view class="card"
			style="display: flex; flex-direction: column;margin-top: 20rpx ;margin-bottom: 200rpx; width: 690rpx;margin-left: 30rpx;">
			<Editor v-model="content" />
		</view>

		<view class="footer">

			<view v-if="!answerId" class="footer-item" style="width: 150rpx;" @click="saveOrUpdateAnswer(1)">
				<view
					style="height: 70rpx;width: 70rpx;background-color: #F2F2F2;border-radius: 50%;display: flex;flex-direction: row;justify-content: center;align-items: center;">
					<uni-icons type="folder-add" size="25" color="#A6A6A6"></uni-icons>
				</view>
				<view style="font-size: 24rpx;color: #A6A6A6;margin-top: 10rpx;">存草稿</view>
			</view>


			<view class="footer-item">
				<view class="footer-button" @click="saveOrUpdateAnswer(0)">
					{{answerId ? '更新回答' : '完成回答'}}
				</view>
			</view>



			<view class="footer-item">
				<view class="footer-visibility" @click="changeVisialbe()">
					<view style="color: #5DACB1;font-weight: bold;">可见性 : {{visibilityChooses[visibility]}}</view>
					<uni-icons style="margin-left: 5rpx;" type="bottom" size="15" color="#5DACB1">
					</uni-icons>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import http from '@/common/service/service.js';
	import Editor from '@/components/editor-wrapper/v2/editor'
	export default {
		components: {
			Editor
		},
		data() {
			return {
				answerId: null,
				title: '',
				context: '',

				visibility: 0,
				visibilityChooses: ["仅自己可见", "仅关注可见", "开放"],


				questionId: '',
				pointId: '',
				answers: [],
				showAnswerAdd: 0,
				pageScrollTop: 0,
				content: '',

				question: {},
				point: {},


				windowHeight: 100,
				mindDeepColor: ['#e7e7e7', '#b9b9b9', '#636363', '#000000'],
				sortTypes: ["默认", "最新", "我的"],
				currentSortTypeIndex: 0
			};
		}
		/**
		 * 生命周期函数--监听页面加载
		 */
		,
		onLoad: function(options) {
			if (options.answerId) {
				this.answerId = options.answerId
				this.getAnswerInfo()
			}
			this.getQuestionInfo(options.questionId)
			this.getPointInfo(options.pointId)
		},


		Scroll(e) {
			this.pageScrollTop = e.scrollTop
		},
		methods: {
			changeSortType(index) {
				this.currentSortTypeIndex = index
			},
			getQuestionInfo(questionId) {
				this.$api.getQuestionInfo({
					id: questionId
				}).then(res => {
					this.question = res.data
				})
			},
			getAnswerInfo() {
				this.$api.getAnswerInfo({
					id: this.answerId
				}).then(res => {
					this.content = res.data.content
				})
			},

			getPointInfo(pointId) {
				this.$api.getPointInfo({
					id: pointId
				}).then(res => {
					this.point = res.data
				})
			},

			saveOrUpdateAnswer() {
				if (this.answerId) {
					this.$api.updateAnswer({
						id: this.answerId,
						content: this.content,
						visibility:this.visibility
					}).then(res => {
						uni.showToast({
							title: "保存成功",
							icon: 'success'
						})
						uni.navigateBack()
					})
				} else {
					this.$api.createAnswer({
						questionId: this.question.id,
						pointId: this.point.id,
						content: this.content,
						visibility:this.visibility
					}).then(res => {
						uni.showToast({
							title: "回答成功",
							icon: 'success'
						})
						uni.navigateBack()
					})
				}

			},

			messageInput() {
				console.log('占位：函数 messageInput 未声明');
			}
		}
	};
</script>
<style scoped lang="scss">
	page {
		background-color: #F8F8F8;
	}

	.answer-add {
		padding-bottom: 120rpx;

		.top {
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			top: 0;
			position: sticky;

			padding: 20rpx 0;

			padding-top: 120rpx;
			
			// #ifdef H5
			padding-top: 0;
			// #endif

			background-color: white;
			border-bottom: solid thin #efefef;
			z-index: 100;


			.input {
				width: 450rpx;
				padding-left: 30rpx;
			}


		}

		.card {
			background-color: white;
			box-shadow: 1px 1px 8px 2px #e9eee9;
			border-radius: 10rpx;
			min-height: 50rpx;
		}


		.footer {
			position: fixed;
			background-color: #ffffff;
			height: 130rpx;
			width: 100%;
			bottom: 0;
			z-index: 100;
			border-top: solid thin #e7e7e7;

			display: flex;
			flex-direction: row;
			align-items: center;

			.footer-item {
				width: 200rpx;
				margin-left: 50rpx;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;

				.text {
					font-size: 32rpx;
					font-weight: bold;

				}

				.footer-visibility {
					display: flex;
					flex-direction: row;
					align-items: center;
					font-size: 28rpx;
				}

				.footer-button {
					padding: 0 30rpx;
					height: 80rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					background-color: #5DACB1;
					border-radius: 50rpx;
					color: white;
				}
			}
		}

	}


	.myButton {
		color: white;
		border-radius: 20rpx;
		background-color: #1244de;
		box-shadow: 1px 1px 8px 2px #c8cec8;
		font-size: 80%;
		font-weight: bold;
		height: 60rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
</style>
